<template>
  <view class="page">
    <Sub-title
      :label="getStateText(detail.state)"
      bg-color="#e9f4f4"
      size="28rpx"
      :bold="false"
      padding="20rpx 40rpx"
      border
    />
    <Sub-title
      v-if="detail.state != 4"
      :label="getStateInfo(detail.state)"
      size="28rpx"
      bg-color="#fff"
      :bold="false"
      padding="20rpx"
      border
    />
    <u-gap v-if="detail.state == 5" />
    <!-- 退款状态:0=申请退款,1=卖家同意,2=卖家拒绝,3=申请平台介入,4=成功退款,5=退款已关闭,6=已提交退货,7=第三方退款中 -->
    <template v-if="detail.state == 0">
      <view class="tips border">
        <view>卖家同意或超时未处理，系统将自动确认</view>
        <view class="margin-top-xs">如果退款被拒绝，您可以修改申请重新发起</view>
      </view>
      <view class="form-right">
        <view>
          <u-button plain type="info" @click="closeRefund(detail.id)">
            关闭退款
          </u-button>
        </view>
        <view style="margin-left: 15rpx">
          <u-button plain type="error" @click="editRefund(detail.id)">
            修改申请
          </u-button>
        </view>
      </view>
      <u-gap />
    </template>
    <template v-if="detail.state == 1">
      <view class="address border">
        <view style="margin-right: 26rpx">
          <u-icon name="map" color="#222" size="20" />
        </view>
        <view class="content">
          <view class="content-top">
            <text>收件人：{{ detail.shopConfig.returnName || "-" }}</text>
            <text>{{ detail.shopConfig.returnPhoneNum || "-" }}</text>
          </view>
          <view class="text-cut-2">
            {{ detail.shopConfig.returnAddr || "-" }}
          </view>
        </view>
      </view>
      <view class="tips border">
        <view>请勿使用平邮或到付，以免商家无法收到退货</view>
        <view class="margin-top-xs">请填写真实快递信息，如超时则关闭退款</view>
      </view>
      <u-gap />
      <view class="form-group border">
        <view class="title">快递单号：</view>
        <u-input
          v-model="returnData.express_no"
          :placeholder-style="placeholderStyle"
          placeholder="请填写快递单号"
          font-size="28rpx"
          border="none"
          clearable
        />
      </view>
      <view class="form-group">
        <view class="title">快递公司：</view>
        <picker @change="kuaidiChange" :range="detail.kuaidi" range-key="name">
          <view class="picker">
            <text v-if="kuaidiKey > -1">
              {{ detail.kuaidi[kuaidiKey].name }}
            </text>
            <view v-else>
              <u-icon name="arrow-right" label="请选择" label-pos="left" />
            </view>
          </view>
        </picker>
      </view>
      <view class="form-right">
        <view>
          <u-button plain type="warning" @click="toExpress(detail.id)">
            确认退货
          </u-button>
        </view>
      </view>
      <u-gap />
    </template>
    <template v-if="detail.state == 6">
      <view class="detail-list border">
        <view class="flex">
          <text>退货物流：</text>
          <text class="gray"> {{ detail.express_name }}({{ detail.express_no }})</text>
        </view>
      </view>
      <view class="tips border">
        <view>如果退款被拒绝，您可以修改申请重新发起</view>
        <view class="margin-top-xs">卖家超时未处理，系统将自动确认</view>
      </view>
      <u-gap />
    </template>
    <template v-if="detail.state == 2">
      <view class="remark">
        拒绝理由：<text class="gray">{{ detail.refuse_content }}</text>
      </view>
      <view class="form-right">
        <view>
          <u-button plain type="info" @click="arbitrationRefund(detail.id)">
            平台介入
          </u-button>
        </view>
        <view style="margin-left: 15rpx">
          <u-button plain type="error" @click="editRefund(detail.id)">
            修改申请
          </u-button>
        </view>
      </view>
      <u-gap />
    </template>
    <template v-if="detail.state == 3">
      <view class="tips border">
        <view>客服正在审核退款详情及退款历史记录</view>
        <view class="margin-top-xs">大概1-3个工作日做出答复，请耐心等待</view>
      </view>
      <u-gap />
    </template>
    <template v-if="detail.state == 4">
      <Sub-title
        label="退款总金额"
        bg-color="#fff"
        size="28rpx"
        :bold="false"
        padding="20rpx"
      >
        <u-text
          slot="right"
          :text="detail.price"
          color="#fe6600"
          size="28rpx"
          mode="price"
          align="right"
        />
      </Sub-title>
      <u-gap />
    </template>
    <Sub-title
      label="退款历史"
      bg-color="#fff"
      size="28rpx"
      :bold="false"
      @click="refundLog(detail.id)"
      padding="20rpx"
    >
      <u-icon slot="right" name="arrow-right" />
    </Sub-title>
    <u-gap />
    <Sub-title
      label="退款详情"
      bg-color="#fff"
      size="28rpx"
      :bold="false"
      padding="20rpx"
    />
    <view class="address bg-gray">
      <view
        class="image"
        :style="{
          backgroundImage: 'url(' + $imageOss(detail.goods.image, 70, 70) + ')',
        }"
      >
      </view>
      <view class="content">
        <view class="content-top">
          <view class="text-cut-2">
            {{ detail.goods.title || "-" }}
          </view>
        </view>
        <view class="gray"> 规格：{{ detail.goods.difference || "-" }} </view>
      </view>
    </view>
    <view class="detail-list">
      <view class="flex">
        <text class="gray"> 退款类型： </text>
        <text> {{ detail.type_text || "-" }} </text>
      </view>
      <view class="flex mt10">
        <text class="gray"> 退款原因： </text>
        <text> {{ detail.reason_text || "-" }} </text>
      </view>
      <view class="flex mt10">
        <text class="gray"> 退款金额： </text>
        <text class="text-price"> {{ detail.price || "-" }} </text>
      </view>
      <view class="flex mt10">
        <text class="gray"> 物流状态： </text>
        <text> {{ detail.expressType_text || "-" }} </text>
      </view>
      <view class="flex mt10">
        <text class="gray"> 退款时间： </text>
        <text> {{ detail.createtime_text || "-" }} </text>
      </view>
    </view>
  </view>
</template>

<script>
import {
  myRefundDetail,
  myRefundExpress,
  myRefundArbitration,
  myRefundCencel,
} from "@/request/myApi.js";
export default {
  data() {
    return {
      refundId: "", // 退款ID
      detail: {},
      returnData: {
        id: 0,
        express_no: "",
        express_name: "",
      },
      kuaidiKey: -1,
      placeholderStyle: {
        fontSize: "28rpx",
        color: "#D9D9D9",
      },
    };
  },
  onLoad(e) {
    this.refundId = e.id;
    this.getData();
  },
  methods: {
    // 获取售后详情
    getData() {
      myRefundDetail(this.refundId).then((res) => {
        if (res.code == 1) {
          this.detail = res.data;
          this.returnData.id = res.data.id;
          this.$prePage().getDataList();
        }
      });
    },
    // 售后状态
    getStateText(state) {
      return [
        "等待卖家同意",
        "等待买家退货",
        "卖家拒绝退款",
        "平台介入",
        "退款完成",
        "退款关闭",
        "等待卖家收取退货",
        "第三方支付退款中",
        "退款失败",
      ][state];
    },
    getStateInfo(state) {
      return [
        "您已成功发起退款，等待卖家同意",
        "您发起的退款卖家已同意，请退货",
        "您可以修改退货申请再次发起",
        "您已申请平台介入，请等待平台对此判定",
        "退款完成",
        "您已关闭本次退款申请",
        "如果商家确认收到货物，并核查没有问题，将退款给您",
        "因第三方快捷支付订单，退款将在24小时内原路返还",
        "快捷支付退款失败，请联系商家",
      ][state];
    },
    // 关闭退款
    closeRefund(id) {
      myRefundCencel({ id }).then((res) => {
        if (res.code == 1) {
          this.getData();
        }
      });
    },
    // 提交快递单号
    toExpress() {
      if (!this.returnData.express_no) {
        uni.showToast({
          title: "运单号不能为空",
          icon: "none",
        });
        return false;
      }
      if (!this.returnData.express_name) {
        uni.showToast({
          title: "请选择快递公司",
          icon: "none",
        });
        return false;
      }
      myRefundExpress(this.returnData).then((res) => {
        if (res.code == 1) {
          this.getData();
        }
      });
    },
    // 选择快递公司
    kuaidiChange(e) {
      this.kuaidiKey = e.detail.value;
      this.returnData.express_name = this.detail.kuaidi[e.detail.value].code;
    },
    // 平台介入
    arbitrationRefund(id) {
      myRefundArbitration({ id }).then((res) => {
        if (res.code == 1) {
          this.getData();
        }
      });
    },
    // 重新编辑
    editRefund(id) {
      uni.navigateTo({
        url: `/pages/my/myGoodsRefundEdit?id=${id}`,
      });
    },
    // 退款历史
    refundLog(id) {
      uni.navigateTo({ url: `/pages/my/myRefundHistory?id=${id}` });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  background-color: #f7f7f7;
  .address {
    display: flex;
    align-items: center;
    color: #222222;
    padding: 26rpx;
    font-size: 28rpx;
    background-color: #ffffff;
    .image {
      font-variant: small-caps;
      margin: 0;
      padding: 0;
      display: inline-flex;
      text-align: center;
      justify-content: center;
      align-items: center;
      color: #ffffff;
      white-space: nowrap;
      position: relative;
      width: 66px;
      height: 66px;
      background-size: cover;
      background-position: center;
      vertical-align: middle;
      margin-right: 30rpx;
    }
    .content {
      flex: 1;
      &-top {
        display: flex;
        justify-content: space-between;
      }
    }
  }
  .tips {
    padding: 26rpx;
    font-size: 26rpx;
    color: #828282;
    background-color: #ffffff;
    > view::before {
      content: "";
      display: inline-block;
      width: 14rpx;
      height: 14rpx;
      background-color: #828282;
      border-radius: 50%;
      margin-right: 20rpx;
    }
    > view:last-child {
      margin-top: 10rpx;
    }
  }
  .form-group {
    background-color: #fff;
    padding: 1rpx 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 104rpx;
    .title {
      padding-right: 26rpx;
      font-size: 28rpx;
      height: 56rpx;
      line-height: 56rpx;
    }
  }
  .form-right {
    display: flex;
    background-color: #fff;
    justify-content: flex-end;
    padding: 20rpx;
  }
  .detail-list {
    background-color: #fff;
    font-size: 26rpx;
    padding: 26rpx;
    color: #222222;
    .flex {
      display: flex;
    }
  }
  .remark {
    padding: 26rpx;
    font-size: 26rpx;
    color: #222222;
    background-color: #fff;
  }
}
.border {
  border-bottom: 1rpx solid #9f9f9f26;
}
.gray {
  color: #828282;
}
.mt10 {
  margin-top: 10rpx;
}
.bg-gray {
  background-color: #f7f7f7 !important;
}
.text-cut-2 {
  width: 100%;
  margin-top: 10rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
</style>
